/* eslint-disable no-unused-vars */
import React from "react";
// import { Modal, Toast, ActionSheet } from "antd-mobile";
// import { lock, unlock } from "tua-body-scroll-lock";
import { withRouter } from "react-router-dom";
// import { IS_PROD, ADD_ADDRESS_URL, ACTIVITY_ID } from "@/config";
import "./index.less";

const isIPhone = new RegExp("\\biPhone\\b|\\biPod\\b", "i").test(window.navigator.userAgent);
let wrapProps;
if (isIPhone) {
  wrapProps = {
    onTouchStart: (e) => e.preventDefault(),
    className: "am-action-sheet-wrap praiseMumAction",
  };
} else {
  wrapProps = {
    className: "am-action-sheet-wrap praiseMumAction",
  };
}

class PraiseMumBox extends React.Component {
  state = {
    isShowTextList: false,
    clickedIndex: "none",
    isBarrageStart: false,
    options: [
      {
        text: "感谢您不是超人，却为我成了万能！",
        top: 10,
        translateX: 30,
        num: 0,
      },
      {
        text: "不止今天，每天都很爱您！",
        top: 70,
        translateX: 50,
        num: 0,
      },
      {
        text: "妈妈最美~愿岁月温柔以待，爱您不止三千遍！",
        top: 130,
        translateX: 60,
        num: 0,
      },
      {
        text: "我生命中最重要最爱的女人，节日快乐哟！",
        top: 190,
        translateX: 10,
        num: 0,
      },
      {
        text: "妈妈节日快乐，身体健康，我爱您！",
        top: 250,
        translateX: 60,
        num: 0,
      },
      {
        text: "承蒙时光不弃！您陪我长大，我陪您变老！",
        top: 310,
        translateX: 30,
        num: 0,
      },
      {
        text: "上帝不能无处不在，所以创造了妈妈！祝全天下母亲节日快乐！",
        top: 370,
        translateX: 10,
        num: 888888888,
      },
      {
        text: "母亲永远是我心灵的温暖港湾，祝亲爱的妈妈节日快乐！",
        top: 430,
        translateX: 0,
        num: 0,
      },
      {
        text: "母亲节快乐！我会再努力，成为您的防弹衣！",
        top: 490,
        translateX: 50,
        num: 0,
      },
      {
        text: "过去您陪我蹒跚学步，未来我陪您夕阳散步！",
        top: 550,
        translateX: 30,
        num: 0,
      },
    ],
    optionsCurrentSelected: -1, // 默认未选择
  };

  componentDidMount() {
    console.log("PraiseMumBox---componentDidMount");
    this.getConfessionList();
  }

  getConfessionList = async () => {
    const { options } = this.state;
    try {
      // const { data } = await api.getConfessionList();
      // if (data?.textList) {
      //   options.forEach((optionItem, index) => {
      //     optionItem.textId = data.textList[index].textId;
      //     optionItem.text = data.textList[index].textTitle;
      //     optionItem.num = data.textList[index].submitCount;
      //   });
      // }
    } catch (error) {
      console.log("获取故事列表出错:", error);
    }
  };

  barrageStartAction = () => {
    const { isBarrageStart } = this.state;
    console.log("isBarrageStart---", isBarrageStart);
    // 动画进行中，立即终止上次的动画，重新开始
    // if (isBarrageStart) {
    this.setState(
      {
        isBarrageStart: false,
      },
      () => {
        setTimeout(() => {
          this.setState({
            isBarrageStart: true,
          });
        }, 100);
      }
    );
    // } else {
    //   this.setState({
    //     isBarrageStart: true,
    //   });
    // }
  };

  toggleOptionsShow = async () => {
    const { isOptionsShow } = this.state;

    // // 只有展开发布信息的时候，才上报埋点
    // if (!isOptionsShow) {
    //   await this.props.triggerBuriedPoint({
    //     page_module: "发布告白",
    //     btn_name: "发布告白",
    //   });
    // }

    this.setState({
      isOptionsShow: !this.state.isOptionsShow,
    });
  };

  optionsTextItemSelect = (index) => async () => {
    const { options } = this.state;
    console.log("index---", index);
    this.toggleOptionsShow();
    this.barrageStartAction();
    options[index].num += 1;

    // 前端数据修改
    this.setState({
      optionsCurrentSelected: index,
      options,
    });
    // 接口同步修改
    try {
      // const { data } = await api.submitConfession({
      //   textId: index + 1,
      // });
    } catch (error) {
      console.log("发布出错:", error);
    }

    // await this.props.triggerBuriedPoint({
    //   page_module: `发布告白内容-第${index + 1}条`,
    //   btn_name: `发布告白内容-第${index + 1}条`,
    // });
  };

  render() {
    const { isShowTextList, isBarrageStart, options, isOptionsShow, optionsCurrentSelected } = this.state;

    return (
      <div className="praiseMumBoxWrap">
        <div className="textItem-inner"></div>
        <div className="contentBox">
          <img className="messageBoardBg" src="https://hsrj.obs.cn-south-1.myhuaweicloud.com/hsrj-web/activity2022/act20220508/messageBoard.png" alt="" />
          <div className="bottomBox">
            <div className={isBarrageStart ? "barrageBox isBarrageStart" : "barrageBox"}>
              {options.map((optionItem, index) => {
                return (
                  <div
                    key={optionItem.text}
                    className={`textItem ${optionItem.top ? `top${optionItem.top}` : ""} ${optionItem.translateX ? `translate${optionItem.translateX}` : ""}`}
                  >
                    <div className={index == optionsCurrentSelected ? "textItem-inner optionsCurrentSelected" : "textItem-inner"}>
                      {optionItem.text + `${optionItem.num ? "+" + optionItem.num : ""}`}
                    </div>
                  </div>
                );
              })}
            </div>
            <div className="bottomButton">
              <img
                src="https://hsrj.obs.cn-south-1.myhuaweicloud.com/hsrj-web/activity2022/act20220508/releaseMessageButton.png"
                alt=""
                onClick={this.toggleOptionsShow}
              />
              {isOptionsShow && (
                <div className="optionsBox">
                  {options.map((optionItem, index) => {
                    return (
                      <div key={optionItem.text} className="optionsTextItem" onClick={this.optionsTextItemSelect(index)}>
                        {optionItem.text}
                      </div>
                    );
                  })}
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    );
  }
}

// ref 和 withRouter 同时使用时，需要用React.forwardRef包装一层，将ref引用透传进去
const withRouterAndRef = (Wrapped) => {
  const WithRouter = withRouter(({ forwardRef, ...otherProps }) => <Wrapped ref={forwardRef} {...otherProps} />);
  const WithRouterAndRef = React.forwardRef((props, ref) => <WithRouter {...props} forwardRef={ref} />);
  const name = Wrapped.displayName || Wrapped.name;
  WithRouterAndRef.displayName = `withRouterAndRef(${name})`;
  return WithRouterAndRef;
};

export default withRouterAndRef(PraiseMumBox);
